<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--采购商品发货信息-->
			<view class="detail-item">
				<uni-section title="采购商品发货商品信息" type="line"></uni-section>
				<view class="detail-content">
					<ty-table
						:data="tableList"
						:columns="columns"
						:sortable="true"
						:cellClassName="() => 'table-cell'"
						:headerCellClassName="() => 'table-cell'"
						:rowClassName="(row) => row?.isSafe ? 'table-row' : 'table-rowRed'"
						stripe
						border>
						<template v-slot:left="{ row }">
							<view class="table-td-cell">
								<view class="table-td-row">
									名称：
									<text class="table-td-text">{{row.productName}}</text>
								</view>
								<view class="table-td-row">
									数量：
									<text class="table-td-text">{{row.purchaseNumber}}</text>
								</view>
								<view class="table-td-row" v-if="checkPermi(['zhouyz:purchaseOrder:price'])">
									价格：
									<text class="table-td-text">{{row.purchasePrice}}</text>
								</view>
							</view>
						</template>
						<template v-slot:right="{ row }">
							<view class="table-td-cell">
								<view class="table-td-row main-flex">
									生产日期：
									<view class="table-td-input main-flex-item">
										<uni-datetime-picker
										type="date"
										placeholder="生产日期"
										:clear-icon="false"
										@change="changeProductionDate($event, row)"
										v-model="row.productionDate" />
									</view>
								</view>
								<view class="table-td-row main-flex">
									过期时间：
									<view class="table-td-input main-flex-item">
										<uni-datetime-picker
										type="date"
										placeholder="过期时间"
										:clear-icon="false"
										@change="changeExpireDate($event, row)"
										v-model="row.expireDate" />
									</view>
								</view>
								<view class="table-td-row main-flex">
									保质期：
									<view class="table-td-text" v-if="row?.expireDate && row?.productionDate">
										<view v-if="row.isSafe">{{row.safeDay}}/{{row.sellByDay}}</view>
										<view class="red" v-else>{{row.safeDay}}/{{row.sellByDay}}</view>
									</view>
								</view>
							</view>
						</template>
					</ty-table>
				</view>
				<uni-section title="采购商品到货时间信息" type="line"></uni-section>
				<view class="detail-content formRef">
					<uni-forms err-show-type="toast" ref="formRef" :model="formData" :rules="formRules" labelWidth="80px">
						<uni-forms-item label="到货时间" name="planArriveTime" required>
							<uni-datetime-picker
							type="date"
							placeholder="到货时间"
							:clear-icon="false"
							v-model="formData.planArriveTime" />
						</uni-forms-item>
						<view class="formRef-btn">
							<button type="primary" :disabled="isSubmit" :loading="isSubmit" @click="submit">提交</button>
						</view>
					</uni-forms>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref, watch } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { purchaseOrderDetail, purchaseOrder, sureSend } from "@/api/erp_api/purchase"
import { warehouseDetail } from "@/api/erp_api/warehouse"
import { copyText, getDateDiff, arrText } from '@/utils/ty.js'
import { sellByDefaultDay } from '@/utils/config.js'
import useUserStore from '@/store/modules/user'

	const userStore = useUserStore()
	onLoad(async (option) => {
		if (option.id) {
			id.value = option.id
			getDetail()
		}
	})
	
	// 数据查询
	const id = ref('')
	const info = ref({})
	const isLoading = ref(false)
	
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		purchaseOrderDetail(params).then(res => {
			info.value = res.data || {}
			isLoading.value = false
			getProduct(res.data.number)
			uni.hideLoading()
    }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	// 表格头部
	const columns = ref([
		{ title: '商品信息', key: 'left' },
		{ title: '生产日期', key: 'right' }
	])
	const tableList = ref([])
	const getProduct = (number) => {
		purchaseOrder({
			number 
		}).then(res => {
			tableList.value = res?.rows[0]?.productList || []
		})
	}
	
	// 生产日期
	const changeProductionDate = (e, row) => {
		isSafeFun(row)
	}
	// 过期日期
	const changeExpireDate = (e, row) => {
		isSafeFun(row)
	}
	
	const isSafeFun = (row) => {
		if (row.expireDate && row.productionDate) {
			const sellByDay = getDateDiff(row.expireDate, row.productionDate)
			const safeDay = getDateDiff(row.expireDate)
			tableList.value[row.rowIndex] = {
				...row,
				sellByDay,
				safeDay,
				isSafe: safeDay >= sellByDefaultDay
			}
		}
	}
	
	// form表单数据
	const formData = ref({
		planArriveTime: ''
	})
	const formRef = ref(null)
	const formRules = ref({
		planArriveTime: {
			rules: [{ required: true, errorMessage: '请选择选择到货时间商' }]
		}
	})
	const isSubmit = ref(false)
	// 提交
	const submit = () => {
		formRef.value.validate().then(formRes => {
			const allProductList = tableList.value
			const params = { 
				...formRes,
				allProductList
			}
			isSubmit.value = true
			sureSend(params).then(async (res) => {
				modal.showToast(res.msg)
				await uni.$u.sleep(1000)
				isSubmit.value = false
				clear()
				uni.$emit('refreshList');  // 触发刷新事件
				uni.navigateBack({
					delta: 1
				})
			}).catch(err => {
				isSubmit.value = false
			})
		})
	}
	// 清空
	const clear = () => {
		formData.value = {
			planArriveTime: ''
		}
	}
	
</script>

<style scoped lang="scss">
	.table-td-input {
		:deep(.uni-date__x-input) {
			height: 24px;
			line-height: 24px;
		}
	}
	.formRef-btn {
		padding: 0rpx 20rpx 40rpx;
	}
</style>
